<template>
  <div class="drawLots_box">
    <div class="drawLots_topHeader">
      <i
        class="iconfont icon-guanbi drawLots_closeBtn"
        @click="closeClickHandler()"
      ></i>

      <logos :logosData="logosData" class="logos_container"></logos>

      <div class="title_container">
        <span class="blue_text">一带一路</span>
        <span class="black_text">暨金砖国家技能发展</span>
        <br />
        <span class="black_text">与技术创新大赛</span>
      </div>

      <div class="drawLot_identity">
        <drawLotsTimesIdentity :drawLotTimesText="drawLotTimesText">
        </drawLotsTimesIdentity>
      </div>
    </div>

    <div class="drawLots_content">
      <div class="content_card">
        <drawLotsNotice
          :noticeTextOne="noticeTextOne"
          :noticeTextTwo="noticeTextTwo"
        >
        </drawLotsNotice>

        <matchTeamIDInput> </matchTeamIDInput>

        <!-- <drawLotsSuccessStatus></drawLotsSuccessStatus> -->

        <userInfoCardStyleTwo> </userInfoCardStyleTwo>

        <div class="startDrawLot_btn" @click="startDraw">开始抽签</div>

        <!-- <matchTeamID :teamID="teamIDStr"> </matchTeamID> -->
      </div>
    </div>

    <!-- 抽签成功的弹框 -->
    <drawLotsSuccessDialog
      :visible="showDialog"
      :title="dialogTeamTitle"
      :numberStr="teamIDStr"
      @close="showDialog = false"
    />
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import logos from "./drawLots/logos.vue";
import userInfoCard from "./drawLots/userInfoCard.vue";
import drawLotsSuccessStatus from "./drawLots/drawLotsSuccessStatus.vue";
import drawLotsNotice from "./drawLots/drawLotsNotice.vue";
import matchTeamID from "./drawLots/matchTeamID.vue";
import drawLotsSuccessDialog from "./drawLots/drawLotsSuccessDialog.vue";
import drawLotsTimesIdentity from "./drawLots/drawLotsTimesIdentity.vue";
import matchTeamIDInput from "./drawLots/matchTeamIDInput.vue";
import userInfoCardStyleTwo from "./drawLots/userInfoCardStyleTwo.vue";

// 用数组存储图标地址
const logosData = ref([
  new URL("@/assets/images/megaGame/logo1.png", import.meta.url).href,
  new URL("@/assets/images/megaGame/logo2.png", import.meta.url).href,
  new URL("@/assets/images/megaGame/logo3.png", import.meta.url).href,
  new URL("@/assets/images/megaGame/logo4.png", import.meta.url).href,
]);

const drawLotTimesText = ref("第二次抽签");
const blueText = ref("一带一路");
const blackText = ref("暨金砖国家技能发展");
const router = useRouter();
const showDialog = ref(false);
const noticeTextOne = "尊敬的考生：您好，为了此次考试的公平性与保密性";
const noticeTextTwo =
  "本次抽签共2轮，第一次抽签可获得参赛编号，第二次抽签时请出该示参赛编号。";
// const dialogTeamTitle = ref("您的参赛编号是：");
// const teamIDStr = ref("188号");
const dialogTeamTitle = ref("您考场和座位是：");
const teamIDStr = ref("第1考场-28号");

function linkCourse() {
  // 示例：跳转到赛事详情页，可根据后续需求修改
  router.push({ path: "/landing-page" });
}

function startDraw() {
  // TODO: 衔接后端抽签接口或路由
  console.log("开始抽签");
  showDialog.value = true;
}

const closeClickHandler = () => {
  console.log("关闭按钮点击");
};
</script>

<style scoped>
@import url("@/assets/scss/megaGame.scss");
</style>
